回顧

在《 03. Vue 指令：v-text, v-html, v-bind 》中，我們學到如何將 vue 實例中的資料渲染在網頁上，以及其細節的不同；在《 04. Vue 指令： v-model 與雙向綁定 》中，我們學到如何雙向綁定，監聽使用者的輸入，並同時改寫 vue 實體的資料，並渲染在網頁上。套個情境來說：現在我們的友好商店，已經可以將一櫃子的精靈球整理出來準備販售，並且也能夠清楚地得知顧客所需要的款式與數量。接下來該讓我們的店員去進行計算與跟客人互動了。

v-on 指令

v-on指令可以將事件偵聽器與一個元素（如按鈕）綁定。事件偵聽器也可以傳入值。在v-on:click後方填入「方法」的名稱，便能每當按鈕被按下時呼叫那個方法，而方法就如一般 javascript 的 function 一樣，而且必須把他們寫在methods裡。methods通常與el、data對齊。

<div id="app">
  <button v-on:click="inc">+1</button> {{ total }}
</div>

var vm = new Vue({
  el: '#app',
  data: {
    total: '0'
  },
  methods: {
    inc() {
      this.total++;
    },
  }
})

成效是每點一次 +1 按鈕，右邊的{{total}}數值也會增加 1。了解效果之後我們拆解一次看看。

1. 使用者點下 +1 按鈕
2. 按鈕上的v-on:click="inc"呼叫methods裡面的inc()函式
3. inc()函式啟動，this.total（這裡的 this 指向 Vue 實體）屬性的值增加 1
4. {{ total }}雙花括號雙向綁定，將更新的data的值在網頁上渲染

函式可以帶參數，事件物件可以透過第一個參數傳進函式。另外，這種單純的寫法也可以簡寫為行內寫法，不過要注意編寫的風格，如果很在乎 html 和 javascript 要盡量分家的話。

<div id="app2">
  <button v-on:click="total++">+1</button> {{ total }}
</div>

var vm = new Vue({
  el: '#app2',
  data: {
    total: '0'
  },
})

簡寫：v-on:click可以簡寫成@click
到此我們就可以做出陽春的客戶操縱介面，詳情請見 codepen。

事件修飾符

可以在事件處理器或事件本身身上加一點小調整來提升瀏覽的體驗。

<!-- 避免在父元素上觸發這個事件 -->
<a v-on:click.stop="stop"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="prevent"></form>
<!-- 只在事件第一次發生時觸發 -->
<button @click.once="handleFirstClick></button>

key 修飾符

不只是滑鼠，也能應用在鍵盤上的處理，呼叫函式。

<!-- 只有在 keyCode 是 27（Esc） 時呼叫 vm.submit() -->
<form v-on:keyup.27="handleEscape">...</form>

enter, space 等等也都可以運用。

此文諸多不周到的地方還請各方大大多多包涵指教。